import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Mixin } from 'lodash-decorators';

import TabNav from './TabNav';
import TabContent from './TabContent';
import Hoc2 from '../hoc/Hoc2';
import Hoc3 from '../hoc/Hoc3';
import './Tabs.scss';

class Tabs extends Component {

  static propTypes = {
    activeIndex: PropTypes.number,
	  className: PropTypes.string,
	  defaultIndex: PropTypes.number,
	  prefixClass: PropTypes.string,
    onChange: PropTypes.func,
  }

  static defaultProps = {
    prefixClass: 'tabs',
  }

  constructor(props) {
    super(props);
    let activeIndex;
    if (props.hasOwnProperty('activeIndex')) {
      activeIndex = props.activeIndex;
    } else if (props.hasOwnProperty('defaultIndex')) {
	    activeIndex = props.defaultIndex;
    }
    this.state = {
      activeIndex,
    }
  }

  componentWillMount() {
    console.log('tabs will be mounted.');
  }

  componentDidMount() {
    console.log('tabs did be mounted.');
  }

  componentWillReceiveProps(nextProps) {
  	if ('activeIndex' in nextProps) {
  		this.setState({
			  activeIndex: nextProps.activeIndex,
		  })
	  }
  }

  shouldComponentUpdate(nextProps, nextState) {
  	const { activeIndex } = this.state;
	  if (activeIndex !== nextState.activeIndex) {
	  	console.log('需要更新组件');
	  	return true;
	  }
	  return false;
  }

  componentWillUnmount() {
    console.log('tabs will be unmounted');
  }

	handleTabClick(activeIndex) {
    const prevIndex = this.state.activeIndex;
    if (prevIndex !== activeIndex && 'defaultIndex' in this.props) {
      this.setState({
	      activeIndex,
      });
      this.props.onChange(activeIndex, prevIndex);
    }
  }

  renderTabNav() {
	  const {
		  prefixClass,
      children,
	  } = this.props;
    const { activeIndex } = this.state;
    return (
      <TabNav
	      key="tabnav"
	      prefixClass={prefixClass}
        panels={children}
        activeIndex={activeIndex}
        onTabClick={this.handleTabClick.bind(this)}
      />
    )
  }

  renderTabContent() {
    const {
	    prefixClass,
      children,
    } = this.props;
    const { activeIndex } = this.state;
    return (
      <TabContent
        key="tabcontent"
        prefixClass={prefixClass}
        panels={children}
        activeIndex={activeIndex}
      />
    )
  }

  render() {
    return (
      <div>
        { this.renderTabNav() }
        { this.renderTabContent() }
      </div>
    )
  }
}

// export default Hoc1(Tabs);
export default Hoc3(Hoc2(Tabs));
